<template>
    <div class="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
        <div class="flex justify-end px-4 pt-4">
        </div>
        <div class="flex flex-col items-center pb-10">
            <img class="w-24 h-24 mb-3 rounded-full shadow-lg" :src="props.pic" alt="Bonnie image" />
            <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">{{ props.name }}</h5>
            <span class="text-sm text-gray-500 dark:text-gray-400">{{ props.artist }}</span>
            <div class="flex mt-4 md:mt-6">
                <a @click="() => { play() }"
                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                    播放
                </a>
                <a @click="() => { add() }"
                    class="py-2 px-4 ms-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
                    添加到歌单
                </a>
            </div>
        </div>
    </div>
</template>
 
<script setup>
import { ref } from 'vue'
import { player as playerRef, useAudioPlayListStore } from '@/stores/counter';
import { addToPlaylist } from '@/boot/requests';
import { ElMessage } from 'element-plus';
const playlistStore = useAudioPlayListStore();
const props = defineProps(
    {
        name: String,
        artist: String,
        pic: String,
        url: String,
        id: String
    }
)
const play = () => {
    if (playerRef.value.isPlaying) {
        playerRef.value.stop()
        setTimeout(() => {
            playlistStore.setAudioPlayList([{
                name: props.name,
                url: props.url,
                song_id: props.id
            }])
            playerRef.value.play()

        }, 0)
    } else {
        setTimeout(() => {
            playlistStore.setAudioPlayList([{
                name: props.name,
                url: props.url,
                song_id: props.id
            }])
            playerRef.value.play()
        }, 0)
    }
}

const add = () => {
    let payload = {
        song_id: props.id,
        song_name: props.name,
        song_url: props.url,
        song_pic: props.pic,
        user_id: localStorage.getItem('userId')
    }
    addToPlaylist(payload).then(res => {
        let resp = res.data
        if (resp.code === 200) {
            ElMessage.success('添加成功')
        } else {
            ElMessage.error('添加失败')
        }
    })
}

</script> 
 
<style scoped></style>